<template>
	<view class="main">
		<view class="items">
			<view class="items-tit">
				性别
			</view>
			<view class="items-con">
				<view class="con-item" v-for="(item1,index1) in sex" :key="index1" @click="selectSex(item1)" :class="item1 == selSex ? 'con-item-on' : ''">
					{{ item1 }}
				</view>
			</view>
		</view>
		<view class="items">
			<view class="items-tit">
				年龄
			</view>
			<view class="items-con">
				<view class="con-item" v-for="(item2,index2) in age" :key="index2" @click="selectAge(item2)" :class="item2 == selAge ? 'con-item-on' : ''">
					{{ item2 }}
				</view>
			</view>
		</view>
		<view class="items">
			<view class="items-tit">
				学历
			</view>
			<view class="items-con">
				<view class="con-item" v-for="(item3,index3) in xueli" :key="index3" @click="selectXueli(item3)" :class="item3 == selXueli ? 'con-item-on' : ''">
					{{ item3 }}
				</view>
			</view>
		</view>
		<view class="items">
			<view class="items-tit">
				身高
			</view>
			<view class="items-con">
				<view class="con-item" v-for="(item4,index4) in height" :key="index4" @click="selectHeight(item4)" :class="item4 == selHeight ? 'con-item-on' : ''">
					{{ item4 }}
				</view>
			</view>
		</view>
		<view class="items">
			<view class="items-tit">
				婚史
			</view>
			<view class="items-con">
				<view class="con-item" v-for="(item5,index5) in hunshi" :key="index5" @click="selectHunshi(item5)" :class="item5 == selHunshi ? 'con-item-on' : ''">
					{{ item5 }}
				</view>
			</view>
		</view>
		<view class="items">
			<view class="items-tit">
				月收入
			</view>
			<view class="items-con">
				<view class="con-item" v-for="(item6,index6) in shouru" :key="index6" @click="selectShouru(item6)" :class="item6 == selShouru ? 'con-item-on' : ''">
					{{ item6 }}
				</view>
			</view>
		</view>
		<view class="items">
			<view class="items-tit">
				所在地
			</view>
			<view class="items-con">
				<view class="con-item" @click="selectCity(0)" :class="selCity == '0' ? 'con-item-on' : ''">
					不限
				</view>
				<view class="con-item" @click="openPicker" :class="selCity == '1' ? 'con-item-on' : ''">
					{{ form.city || '选择地区' }}
				</view>
			</view>
		</view>
		<view class="items">
			<view class="items-tit">
				礼物量
			</view>
			<view class="items-con">
				<view class="con-item" v-for="(item8,index8) in liwunum" :key="index8" @click="selectLiwunum(item8)" :class="item8 == selLiwunum ? 'con-item-on' : ''">
					{{ item8 }}
				</view>
			</view>
		</view>
		<view class="items">
			<view class="items-tit">
				收藏量
			</view>
			<view class="items-con">
				<view class="con-item" v-for="(item9,index9) in shoucangnum" :key="index9" @click="selectShoucangnum(item9)" :class="item9 == selShoucangnum ? 'con-item-on' : ''">
					{{ item9 }}
				</view>
			</view>
		</view>
		<view class="btn">
			<view class="btn1" @click="reset">
				重置
			</view>
			<view class="btn2" @click="submit">
				确定
			</view>
		</view>
		<!-- 省市区 -->
		<view class="">
			<lotus-address v-on:choseVal="choseValue" :lotusAddressData="lotusAddressData"></lotus-address>
		</view>
	</view>
</template>

<script>
	import lotusAddress from "../../../components/lotusAddress/Winglau14-lotusAddress.vue";
	export default {
		data() {
			return {
				form: {},
				sex: ['不限','男','女'], // 性别
				age: ['不限','70后','80后','90后','00后'], // 年龄
				xueli: ['不限','高中','大专','本科','硕士研究生','博士研究生'], // 学历
				height: ['不限','160cm≤','160~170cm','170~180cm','≥180cm'], // 身高
				hunshi: ['不限','未婚','离异','丧偶'], // 婚史
				shouru: ['不限','3000≤','3000~6000','6000~10000','≥10000'], // 年收入
				city: ['不限','选择地区'], // 所在地
				liwunum: ['不限','最多'], // 礼物量
				shoucangnum: ['不限','最多'], // 收藏量
				selSex: '', // 存储选中的性别
				selAge: '', // 存储选中的年龄
				selXueli: '', // 存储选中的学历
				selHeight: '', // 存储选中的身高
				selHunshi: '', // 存储选中的婚史
				selShouru: '', // 存储选中的年收入
				selCity: '0', // 存储选中的所在地
				selLiwunum: '不限', // 存储选中的礼物量
				selShoucangnum: '不限', // 存储选中的收藏量
				// 省市区
				lotusAddressData:{
					visible:false,
					provinceName:'',
					cityName:'',
					townName:'',
				},
			}
		},
		components:{
			"lotus-address":lotusAddress
		},
		methods: {
			// 选择性别
			selectSex(v1){
				this.selSex = v1
				let key = 'sex'
				let val = v1
				if(v1 == '不限'){
					val = ''
				}
				this.form[key] = val
			},
			// 选择年龄
			selectAge(v2){
				this.selAge = v2
				let key = 'age'
				let val = v2
				if(v2 == '不限'){
					val = ''
				}
				this.form[key] = val
			},
			// 选择学历
			selectXueli(v3){
				this.selXueli = v3
				let key = 'xueli'
				let val = v3
				if(v3 == '不限'){
					val = ''
				}
				this.form[key] = val
			},
			// 选择身高
			selectHeight(v4){
				this.selHeight = v4
				let key = 'height'
				let val = v4
				if(v4 == '不限'){
					val = ''
				}
				this.form[key] = val
			},
			// 选择婚史
			selectHunshi(v5){
				this.selHunshi = v5
				let key = 'hunshi'
				let val = v5
				if(v5 == '不限'){
					val = ''
				}
				this.form[key] = val
			},
			// 选择年收入
			selectShouru(v6){
				this.selShouru = v6
				let key = 'shouru'
				let val = v6
				if(v6 == '不限'){
					val = ''
				}
				this.form[key] = val
			},
			// 选择所在地
			selectCity(v7){
				this.selCity = v7
				let key = 'city'
				let val = v7
				if(v7 == '0'){
					val = ''
				}
				this.form[key] = val
			},
			// 选择礼物量
			selectLiwunum(v8){
				this.selLiwunum = v8
				let key = 'liwunum'
				let val = v8
				if(v8 == '不限'){
					val = ''
				}
				if(v8 == '最多'){
					this.form['shoucangnum'] = ''
					this.selShoucangnum = '不限'
				}
				this.form[key] = val
			},
			// 选择收藏量
			selectShoucangnum(v9){
				this.selShoucangnum = v9
				let key = 'shoucangnum'
				let val = v9
				if(v9 == '不限'){
					val = ''
				}
				if(v9 == '最多'){
					this.form['liwunum'] = ''
					this.selLiwunum = '不限'
				}
				this.form[key] = val
			},
			// 选择市区
			addressChange(e){
				
			},
			//打开picker
			openPicker() {
				this.lotusAddressData.visible = true;
				this.selCity = '1'
			},
			//回传已选的省市区的值
			choseValue(res){
				//res数据源包括已选省市区与省市区code
				console.log(res);
				this.lotusAddressData.visible = res.visible;//visible为显示与关闭组件标识true显示false隐藏
				//res.isChose = 1省市区已选 res.isChose = 0;未选
				if(res.isChose){
					this.lotusAddressData.provinceName = res.province;//省
					this.lotusAddressData.cityName = res.city;//市
					this.lotusAddressData.townName = res.town;//区
					// this.formData.city = `${res.province} ${res.city} ${res.town}`; //region为已选的省市区的值
					this.form['city'] = res.city
				}
			},
			// 重置
			reset(){
				this.form           = {}
				this.selSex         = ''
				this.selAge         = ''
				this.selXueli       = ''
				this.selHeight      = ''
				this.selHunshi      = ''
				this.selShouru      = ''
				this.selCity        = '0'
				this.selLiwunum     = '不限'
				this.selShoucangnum = '不限'
			},
			// 确定
			submit(){
				let obj = this.form
				var removePropertyOfNull=function(obj){
				    Object.keys(obj).forEach(item=>{
				        if(!obj[item])  delete obj[item]
				    })
				    return obj;
				}
				removePropertyOfNull(obj)
				uni.$emit('updateData', obj)
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>
<style>
page {
	background-color: #FFFFFF;
}
</style>
<style lang="scss" scoped>
.main {
	padding: 40rpx 30rpx;
	.items {
		margin-bottom: 30rpx;
		.items-tit {
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #000013;
			margin-bottom: 40rpx;
		}
		.items-con {
			display: flex;
			flex-wrap: wrap;
			.con-item {
				width: 30%;
				height: 72rpx;
				background: #F9F9F9;
				border-radius: 8rpx;
				line-height: 72rpx;
				text-align: center;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 300;
				color: #000013;
				margin-right: 30rpx;
				margin-bottom: 30rpx;
			}
			.con-item:nth-child(3n) {
				margin-right: 0;
			}
			.con-item-on {
				background-color: #F3EFFF;
				color: #7F5AFF;
			}
		}
	}
	.btn {
		display: flex;
		justify-content: space-between;
		.btn1 {
			width: 240rpx;
			height: 80rpx;
			background: #FFFFFF;
			border: 1rpx solid #BBC3D3;
			border-radius: 16rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 28rpx;
			font-family: PingFang;
			font-weight: 500;
			color: #000013;
		}
		.btn2 {
			width: 400rpx;
			height: 80rpx;
			background: #7F5AFF;
			border-radius: 16rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 28rpx;
			font-family: PingFang;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
}

</style>
